<template>
  <div>
    <template v-for="(item, index) in menuList" :key="item.path">
      <!-- 没有子路由的显示
       必须给每个菜单设置唯一的标识:index="item.path"-->
      <template v-if="!item.children">
        <!--在路由当中添加一个hidden属性，并添加一个判断条件决定是否显示在菜单中 -->
        <el-menu-item
          v-if="!item.meta.hidden"
          :index="item.path"
          @click="goRoute(item.path)"
        >
          <el-icon>
            <component :is="item.meta.icon"></component>
          </el-icon>
          <template #title>
            <span>{{ item.meta.title }}</span>
          </template>
        </el-menu-item>
      </template>

      <!-- 只有一个子路由也可直接显示 -->
      <template v-if="item.children && item.children.length == 1">
        <el-menu-item
          v-if="!item.children[0].meta.hidden"
          :index="item.children[0].path"
          @click="goRoute(item.children[0].path)"
        >
          <!-- 使用默认插槽#title -->
          <el-icon>
            <component :is="item.children[0].meta.icon"></component>
          </el-icon>
          <template #title>
            <span>{{ item.children[0].meta.title }}</span>
          </template>
        </el-menu-item>
      </template>

      <!-- 有三个子路由的显示 -->
      <template v-if="item.children && item.children.length === 3">
        <el-sub-menu :index="item.path">
          <!-- 移除父菜单点击事件 -->
          <template #title>
            <el-icon>
              <component :is="item.meta.icon"></component>
            </el-icon>
            <span>{{ item.meta.title }}</span>
          </template>
          <el-menu-item
            v-for="child in getChildren(item)"
            :key="child.path"
            :index="child.path"
            @click="goRoute(child.path)"
          >
            <template #title>
              <el-icon>
                <component :is="child.meta.icon"></component>
              </el-icon>
              <span>{{ child.meta.title }}</span>
            </template>
          </el-menu-item>
        </el-sub-menu>
      </template>

      <!-- 有四个子路由显示 -->
      <template v-if="item.children && item.children.length === 4">
        <el-sub-menu :index="item.path">
          <!-- 移除父菜单点击事件 -->
          <template #title>
            <el-icon>
              <component :is="item.meta.icon"></component>
            </el-icon>
            <span>{{ item.meta.title }}</span>
          </template>
          <el-menu-item
            v-for="child in getChildren(item)"
            :key="child.path"
            :index="child.path"
            @click="goRoute(child.path)"
          >
            <!-- :index="`${item.path}/${child.path}`" 
            @click="goRoute(`${item.path}/${child.path}`)" -->

            <template #title>
              <el-icon>
                <component :is="child.meta.icon"></component>
              </el-icon>
              <span>{{ child.meta.title }}</span>
            </template>
          </el-menu-item>
        </el-sub-menu>
      </template>
    </template>
  </div>
</template>

<script lang="ts" setup name="Menu">
import { useRouter } from 'vue-router'
interface MenuItem {
  path: string
  meta: {
    title: string
    hidden?: boolean
    icon?: string
  }
  children?: MenuItem[]
}

defineProps(['menuList'])

//获取路由器对象
let $router = useRouter()
// 修正 goRoute 函数
function getChildren(item: MenuItem): MenuItem[] {
  return item.children?.filter((child) => !child.meta.hidden) || []
}
//  @click 事件中显式传递当前菜单项的 path，避免接收原生事件对象
function goRoute(path: string) {
  if (path) {
    $router.push(path).catch((err) => {
      // 捕获重复导航错误（Vue Router 4+ 默认抛出）
      if (!err.name.includes('NavigationDuplicated')) {
        console.error('路由跳转失败:', err)
      }
    })
  }
}
</script>

<style scoped lang="scss"></style>
